<template>
  <div class="list">
    <div class="content-head" style="margin-bottom: 20px">
      <div class="sort-keys">
        <div class="tab-list">
          <div
            class="item"
            @click="keys.status = item.key"
            :class="{ actived: keys.status === item.key }"
            v-for="(item, index) in statusList"
          >
            {{ item.text }}
            ({{ statusTotal[item.key] }})
          </div>
          <a-input-search
            placeholder="输入关键字"
            enter-button
            style="width: 180px; margin-right: 10px"
            v-model="key"
            allowClear
            :size="size"
            @input="onSearch"
            @search="onSearch"
          />

          <router-link to="/activity/setting" @click="handleDelete(row)" style="margin: 0px 10px">盲盒全局配置</router-link>
        </div>
      </div>
      <a-button type="primary" icon="plus" @click="handleCreate" v-if="!selectMode"
        >创建{{ resourceTypeText }}</a-button
      >
    </div>
    <a-table class="table" :rowKey="row => row.uuid" :dataSource="data" :pagination="pagination" :size="size">
      <a-table-column title="标题" class="table-column" width="300px">
        <template slot-scope="row">
          <div class="thumb-c">
            <img class="thumb" :src="row.cover_img" />
            <div class="right">
              <div class="title">
                {{ row.title }}
                <div>
                  <a-tag color="orange" class="small" v-if="row.is_presell">预售</a-tag>
                  <a-tag color="red" class="small" size="small" v-if="row.status == 0">下架</a-tag>
                </div>
              </div>
              <div class="image-tag">
                <span class="marked-tag" @click="markBox(row)" :class="{ actived: row.marked_at }">标记</span>
                <span>角标:</span>
                <span>{{ (row.image_tag && row.image_tag.title) || '-' }}</span>
              </div>
              <div class="price">
                <PriceDisplay :info="row"></PriceDisplay>
              </div>
            </div>
          </div>
        </template>
      </a-table-column>
      <a-table-column title="利润率" width="120px">
        <template slot-scope="row">
          <div>{{ row.lr }}</div>
        </template>
      </a-table-column>
      <a-table-column title="SKU" width="280px">
        <template slot-scope="row">
          <div>
            <span style="font-weight: 500">普通款: </span>
            <span>{{ row.normal_skus_count }}款</span>&nbsp; <span>{{ row.normal_sku_sales || 0 }}销量</span>&nbsp;
            <span>{{ row.normal_sku_stock || 0 }}库存</span>&nbsp;
            <a href="javascript:;" @click="handleEditNormalSku(row)">编辑</a>
          </div>
          <div style="margin-top: 4px">
            <span style="font-weight: 500">隐藏款: </span>
            <span>{{ row.hidden_skus_count }}款</span>&nbsp; <span>{{ row.hidden_sku_sales || 0 }}销量</span>&nbsp;
            <span>{{ row.hidden_sku_stock || 0 }}库存</span>&nbsp;
            <a href="javascript:;" @click="handleEditHiddenSku(row)">编辑</a>
          </div>
        </template>
      </a-table-column>

      <a-table-column title="统计" width="120px">
        <template slot-scope="row">
          <div>{{ row.room_total }}房间</div>
          <div>{{ row.sales }}销量</div>
          <div>{{ row.return_total }}返售</div>
        </template>
      </a-table-column>

      <a-table-column title="上下架" width="40px">
        <template slot-scope="row">
          <ISwitch :value="row.status" :active="1" :unactive="0" @change="statusChange($event, row)" />
        </template>
      </a-table-column>

      <a-table-column title="排序" width="120px">
        <template slot-scope="row">
          <span>{{ row.list_weight }}</span> &nbsp
          <a href="javascript:;" @click="handleEditListWeight(row)">编辑</a>
        </template>
      </a-table-column>
      <a-table-column title="操作" key="action" width="220px">
        <template slot-scope="row">
          <div>
            <a href="javascript:;" @click="getPath(row)">预览/路径</a>
            <a-divider type="vertical" />
            <a href="javascript:;" @click="handleEdit(row)">编辑</a>
          </div>
          <div style="margin-top: 6px">
            <a href="javascript:;" @click="handleCopy(row)">复制</a>
            <a-divider type="vertical" />
            <a href="javascript:;" @click="handleAddRoom(row)">增加房间</a>
            <a-divider type="vertical" />
            <a href="javascript:;" @click="handleDelete(row)">删除</a>
          </div>
        </template>
      </a-table-column>
    </a-table>
    <EditNormalSku :uuid="editUuid" v-if="isEditNormalSku" @refresh="fetchData" @close="isEditNormalSku = false"></EditNormalSku>
  </div>
</template>
<script>
import EditNormalSku from './components/EditNormalSku.vue'
export default {
  props: {
    size: {
      type: String,
      default: 'default',
    },
  },
  components:{
    EditNormalSku
  },
  data() {
    return {
      statusList: [
        {
          text: '上架中',
          key: 'on_stock',
        },
        {
          text: '已下架',
          key: 'off_stock',
        },
        {
          text: '已售罄',
          key: 'sell_out',
        },
        {
          text: '标记的',
          key: 'marked',
        },
      ],
      actived: 'on_stock',
      statusTotal: {
        on_stock: 0,
        off_stock: 0,
        sell_out: 0,
        marked: 0,
      },
      keys: {
        status: 'on_stock',
      },
      data:[],
      pagination: {
        // 分页配置
        current: 1, // 当前页数
        pageSize: 10, // 每页条数
        total: 0, // 数据总数
        onChange: this.handlePageChange, // 切换页码时的回调函数
      },
      key:'',
      isEditNormalSku:false
    }
  },
  created() {
    this.getData()
  },
  watch: {
      params() {
        this.refreshData()
      },
      category_id() {
        this.refreshData()
      },
      keys: {
        handler(value) {
          this.getData()
        },
        deep: true
      }
    },
  methods: {
    handleEditNormalSku(val){
        console.log(val)
        this.isEditNormalSku=true
    },
    onSearch(){
        this.getData()
    },
    handlePageChange(e){
        this.pagination.current = e
        this.getData()
    },
    getData() {
      this.$http.get('/carddrawer/index',{
        params:{
            status: this.keys.status,
            page:this.pagination.current,
            per_page:this.pagination.pageSize,
            key:this.key
        }
      }).then((res) => {
        console.log('res', res)
        this.data = res.data.list
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.table-column {
  border: 1px solid red;
}

.marked-tag {
  border-radius: 50px;
  border: 1px solid #666;
  font-size: 10px;
  padding: 1px 6px;
  color: #666;
  cursor: pointer;
  margin-right: 6px;

  &.actived {
    background: #666;
    color: white;
  }
}

.sort-keys {
  display: flex;
  align-items: center;

  .tab-list {
    display: flex;
    margin-top: 6px;
    border-bottom: 1px solid #e1e1e1;
    margin-right: 50px;

    .item {
      margin-right: 30px;
      padding: 0px 10px 4px 10px;
      cursor: pointer;
      font-weight: 500;

      &.actived {
        color: #1890ff;
        border-bottom: 3px solid #1890ff;
      }

      &:hover {
        color: #1890ff;
      }
    }
  }
}

.content-head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.table {
  .thumb {
    height: 60px;
    width: 60px;
    border-radius: 6px;
  }

  .content-image {
    height: 60px;
    width: 60px;
    margin-right: 10px;
    margin-bottom: 10px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;

    &:hover {
      opacity: 0.8;
    }
  }
}

.box {
  background-color: #fff;
}

.header-content {
  .input {
    margin-right: 15px;
    width: 200px;
  }
}

.table {
  .img {
    width: 40px;
    height: 40px;
    object-fit: contain;
  }

  .thumb-c {
    display: flex;
    align-items: center;
    .right {
      margin-left: 10px;
    }
    .title {
      min-width: 100px;
      font-weight: 500;
    }
  }

  .image-tag {
    color: rgba(0, 0, 0, 0.45);
    font-size: 13px;
    line-height: 22px;
  }
}
</style>
